<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息清单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
            background-image: url("static/images/01.png");
            background-size: cover;
            background-repeat: no-repeat;
        }
        form {
            max-width: 600px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input[type="text"], select, input[type="number"], input[type="file"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            padding: 15px 20px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            display: block;
            margin: 20px auto 0;
        }
        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<form id="infoForm">
    <h1>个人信息单</h1>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required>

    <label for="gender">性别:</label>
    <select id="gender" name="gender" required>
        <option value="male">男</option>
        <option value="female">女</option>
    </select>

    <label for="phone">手机号码:</label>
    <input type="text" id="phone" name="phone" required>

    <label for="age">年龄:</label>
    <input type="number" id="age" name="age" required>

    <label for="hobbies">爱好:</label>
    <input type="text" id="hobbies" name="hobbies" required>

    <label for="jobStatus">工作情况:</label>
    <input type="text" id="jobStatus" name="jobStatus" required>

    <label for="address">现住址:</label>
    <input type="text" id="address" name="address" required>

    <label for="height">身高 (cm):</label>
    <input type="number" id="height" name="height" required>

    <label for="weight">体重 (kg):</label>
    <input type="number" id="weight" name="weight" required>

    <label for="education">学历:</label>
    <input type="text" id="education" name="education" required>

    <label for="photo">个人照片:</label>
    <input type="file" id="photo" name="photo" accept="image/*" required>

    <input type="submit" value="提交">
</form>

<script>
    var base64String = '';
    function isValidPhoneNumber(phone) {
        // 使用正则表达式进行手机号码格式校验
        var phoneRegex = /^[1][3-9]\d{9}$/;
        return phoneRegex.test(phone);
    }
    function convertToBase64(file, callback) {
        var reader = new FileReader();
        reader.onload = function (e) {
            base64String = e.target.result; // 将base64格式的照片数据存储在全局变量中
            callback(base64String);
        };
        reader.readAsDataURL(file);
    }

    document.getElementById("photo").addEventListener("change", function () {
        var file = this.files[0];
        if (file) {
            convertToBase64(file, function (base64String) {
                // 在这里可以将base64String赋值给一个隐藏的input元素，然后将其包含在表单数据中提交到后端
                console.log(base64String,'base64');

            });
        }
    });
    document.getElementById("infoForm").addEventListener("submit", function (event) {
        event.preventDefault(); // 阻止表单默认提交行为
        // 获取表单数据
        var formData = new FormData(this);
        var formDataObject = {};
        formData.forEach(function (value, key) {
            formDataObject[key] = value;
        });
        // 姓名和性别必填校验
        var name = formDataObject['name'];
        var gender = formDataObject['gender'];
        if (name.trim() === '' || gender.trim() === '') {
            alert('姓名和性别为必填项');
            return;
        }
        // 手机号码校验
        var phone = formDataObject['phone'];
        if (!isValidPhoneNumber(phone)) {
            alert('请输入有效的手机号码');
            return;
        }
        // 获取表单数据
        var formData = new FormData(this);
        var formDataObject = {};
        formData.forEach(function (value, key) {
            formDataObject[key] = value;
        });
        var obj = {}
        formDataObject.base64 = base64String
        formDataObject.fileName =formDataObject.photo.name
        // 在这里可以将formDataObject发送到后端进行处理
        console.log(formDataObject,formDataObject.photo.name); // 这里只是简单地在控制台打印数据

        // 发送表单数据到后端
        fetch('saveSysUser', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(formDataObject)
        }).then(()=>{
            // console.log('6666666')
            window.location.href = "success";
        }).catch((error) => {
                window.location.href = 'error'; // 页面跳转到失败页面
    })});
    
</script>
</body>
</html>